import React from "react";

// PureComponent 当组件的state或props改变的值相等则不会触发render
// PureComponent 无法优化state或props为引用类型的数据
// 一般父组件加了PureComponent子组件可以不再加
// 父组件为引用类型，但是子组件只依赖父组件引用类型中的基本数据类型，此时可以给子组件加上PureComponent进行组件优化
// 当组件依赖state基本都是基本数据类型，而且会频繁操作，此时可以用PureComponent进行组件优化。其他场景可以正常写Componennt

// vue -> 虚拟dom -> dom  减少重回回流，局部更新
// 纯静态页，没有页面更新
class Son extends React.PureComponent {
    render() {
        console.log("render 来自子组件");
        return (
            <div>
                Son
                <p>props name: {this.props.name}</p>
                <p>props obj.name: {this.props.objName}</p>
            </div>
        );
    }
}

class App extends React.PureComponent {
    state = {
        count: 0,
        name: "小白",
        obj: {
            name: "传智播客",
        },
        arr: [1, 2, 3],
    };
    render() {
        console.log("render 执行了");
        return (
            <div>
                <p>count: {this.state.count}</p>
                <p>name: {this.state.name}</p>
                <p>obj.name: {this.state.obj.name}</p>
                <p>arr: {this.state.arr}</p>
                <hr />
                <Son name={this.state.name} objName={this.state.obj.name}></Son>
                <button
                    onClick={() => {
                        this.setState({
                            count: this.state.count,
                        });
                    }}>
                    count + 1
                </button>
                <button
                    onClick={() => {
                        this.setState({
                            name: "小黑",
                        });
                    }}>
                    setName
                </button>
                <button
                    onClick={() => {
                        this.setState({
                            obj: { name: "黑马程序员" },
                        });
                    }}>
                    setObjName
                </button>
                <button
                    onClick={() => {
                        this.setState({
                            arr: [1, 2, 3],
                        });
                    }}>
                    setArr
                </button>
            </div>
        );
    }
}

export default App;
